<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML DOM - Make a resizable element</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="/css/demo.css" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Inter&family=Source+Code+Pro&display=swap"
        />
        <style>
            .resizable {
                position: relative;

                /* Center the content */
                align-items: center;
                display: flex;
                justify-content: center;

                /* Misc */
                border: 1px solid #cbd5e0;
                height: 8rem;
                width: 8rem;
            }
            .resizer {
                position: absolute;
            }

            /* Placed at the right side */
            .resizer-r {
                cursor: col-resize;
                height: 100%;
                right: 0;
                top: 0;
                width: 5px;
            }

            /* Placed at the bottom side */
            .resizer-b {
                bottom: 0;
                cursor: row-resize;
                height: 5px;
                left: 0;
                width: 100%;
            }

            /* Optional styles */

            .container {
                min-height: 32rem;
                padding: 1rem;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="resizable" id="resizeMe">
                Resize me
                <div class="resizer resizer-r"></div>
                <div class="resizer resizer-b"></div>
            </div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // Query the element
                const ele = document.getElementById('resizeMe');

                // The current position of mouse
                let x = 0;
                let y = 0;

                // The dimension of the element
                let w = 0;
                let h = 0;

                // Handle the mousedown event
                // that's triggered when user drags the resizer
                const mouseDownHandler = function (e) {
                    // Get the current mouse position
                    x = e.clientX;
                    y = e.clientY;

                    // Calculate the dimension of element
                    const styles = window.getComputedStyle(ele);
                    w = parseInt(styles.width, 10);
                    h = parseInt(styles.height, 10);

                    // Attach the listeners to `document`
                    document.addEventListener('mousemove', mouseMoveHandler);
                    document.addEventListener('mouseup', mouseUpHandler);
                };

                const mouseMoveHandler = function (e) {
                    // How far the mouse has been moved
                    const dx = e.clientX - x;
                    const dy = e.clientY - y;

                    // Adjust the dimension of element
                    ele.style.width = `${w + dx}px`;
                    ele.style.height = `${h + dy}px`;
                };

                const mouseUpHandler = function () {
                    // Remove the handlers of `mousemove` and `mouseup`
                    document.removeEventListener('mousemove', mouseMoveHandler);
                    document.removeEventListener('mouseup', mouseUpHandler);
                };

                // Query all resizers
                const resizers = ele.querySelectorAll('.resizer');

                // Loop over them
                [].forEach.call(resizers, function (resizer) {
                    resizer.addEventListener('mousedown', mouseDownHandler);
                });
            });
        </script>
    </body>
</html>
